<template>
  <div >
    <el-button style="margin-bottom: 30px;" type="primary" @click="toOpen">添加目录</el-button>
    <el-table border :data="dirList"
    @current-change="selRow"
    :highlight-current-row="true">
        <el-table-column label="目录" prop="CDName"></el-table-column>
        <el-table-column label="视频数" prop="CourseNumber"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
                <el-link type="success" @click="toEdit(scope.row)">编辑</el-link>
                <el-link type="danger" @click="toDel(scope.row._id)">删除</el-link>
            </div>
          </template>
        </el-table-column>
    </el-table>
    <!-- 添加目录的弹出层 -->
    <el-dialog :title="title" width="50%" :visible.sync="dirFlag">
        <el-form label-width="120px" :model="addObj" :rules="rules" ref="dirForm">
          <el-form-item label="目录名称" prop="CDName">
            <el-input v-model="addObj.CDName"></el-input>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <div> 
              <el-button type="primary" @click="toAdd">确定</el-button>
              <el-button type="danger">取消</el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import {addDirApi,delDirApi,editDirApi} from '../../../api/course'
export default {
  name: 'JsxyCourseDir',

  data() {
    return {
      title:"添加目录",
      editId:"",//正在修改的目录_id
      dirList:[],//目录列表
      dirFlag:false,
      addObj:{
        CDName:""//目录名称
      },
      rules:{ //规则
        CDName:[{required:true,message:"目录名称必填",trigger:'blur'}]
      }
    };
  },
  created(){
    // 监听兄弟组件获取的目录数据
    this.$bus.$on("sendDir",(val)=>{
      this.dirList=val;
    })
  },
  mounted() {
    
  },

  methods: {
    selRow(row){ //目录表格 当前行点击事件
        console.log(row) //row当前的数据
        // 将选中的目录的_id传给视频添加弹出层组件
        // 将选中的目录的_id传给 目录下视频列表组件
        this.$bus.$emit('sendDirId',row._id)
    },
    toEdit(row){ // 点编辑 当前行数据做回显
      this.addObj.CDName=row.CDName;
      this.editId=row._id;//存储目录的_id
      this.title="编辑目录"
      this.dirFlag=true;
    },
    async toDel(_id){ //删除目录接口
      let res=await delDirApi({
         CDid:this.$route.query._id, //课程的_id
        _id:_id//目录的_id
      })  
      console.log(res)
      // 删除目录  让兄弟组件 触发重新获取
      this.$bus.$emit("getdir")
    },
    toOpen(){
      this.dirFlag=true;
    },
    toAdd(){ //添加目录接口和修改目录接口
      this.$refs.dirForm.validate().then(async ()=>{
         if(this.editId){ //如果有修改id修改接口
            let editRes=await editDirApi({
              CDName:this.addObj.CDName, //目录名称
              CDid:this.$route.query.ID, //课程ID
              _id:this.$route.query._id,//课程的_id
              dirid:this.editId,//目录的_id
            })
            console.log(editRes,"88888888")
             // 存储修改成功后返回的最新目录数据
            this.dirList=editRes.data.data.list;
         }else{ //添加接口
             let res=await addDirApi({
            CDName:this.addObj.CDName, //目录名称
            CDid:this.$route.query.ID, //课程ID
            _id:this.$route.query._id//课程的_id
          })
            // 存储添加成功后返回的最新目录数据
            this.dirList=res.data.data.list;
         }
            this.$message.success("操作成功")
            this.addObj.CDName="";
            this.dirFlag=false;//关闭遮罩
            this.title="添加目录"
            this.editId="" //清空修改id
          
      })
    }
  },
};
</script>
<style lang="less">
    .current-row td{
    background:red;
  }
</style>